<template>
	<view class="content">
		<u-navbar :is-back="false" title-color="#fff" :background="background" :border-bottom="false" title="小家电注册">
		</u-navbar>
		<!-- 表单 -->
		<view class="input">
			<u-field trim v-model="mobile" label="手机号" placeholder="请填写手机号"></u-field>
			<u-field trim v-model="code" label="验证码" placeholder="请填写验证码">
				<u-button size="mini" slot="right" type="success" @click="getCode">{{codeText}}</u-button>
			</u-field>
			<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
		</view>
		<!-- 登录注册 -->
		<view class="btn">
			<u-button :throttle-time="1000" :custom-style="customStyle" shape="circle" :plain="true" :ripple="true"
				ripple-bg-color="#2979FF">登录</u-button>
			<u-button :throttle-time="1000" :custom-style="customStyle" shape="circle" :plain="true" :ripple="true"
				ripple-bg-color="#2979FF">注册</u-button>
		</view>
		<!-- 注册方式 -->
		<view class="login">
			<text>账号密码登录</text>
			<text>手机快速注册</text>
		</view>
		<!-- 其他登录方式 -->
		<u-divider :margin-bottom="100"  bg-color="#F7F7F7" :margin-top="100">其他登录方式</u-divider>
		<!-- 登录工具 -->
		<view class="login-item">
			<view @click="send('qq')">
				<u-icon name="qq-fill" color="#2791B0" size="80"></u-icon>
				<text>QQ</text>
			</view>
			<view @click="send('wx')">
				<u-icon name="weixin-circle-fill" color="#09BB07" size="80"></u-icon>
				<text>微信</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#15BBE1',
				},
				mobile: '',
				code: '',
				codeText: '',
				// 按钮样式
				customStyle: {
					marginTop: '10px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: 'red',
				}
			}
		},
		methods: {
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			send(name){
				if(name == 'qq'){
					uni.navigateTo({
						url:'/subpag/demo/demo'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-item{
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		view{
			display: flex;
			align-items: center;
			flex-direction: column;
		}
	}
	.login {
		display: flex;
		justify-content: space-between;
		color: rgba(0, 0, 0, .4);
		font-size: 1rem;
	}

	.input {
		margin-top: .2rem;

	}

	.btn {
		margin: 40upx 0;
	}

	page {
		padding: 20px;
		background-color:#F7F7F7;
	}
	.content{
		background-color: #F7F7F7;
		height: 100vh;
		padding: 0 30upx;
	}
</style>
